import React from "react"
import { BrowserRouter as Router, Route, Link } from "react-router-dom"

export default function ParamsExample() {
  return (
    <Router>
      <div>
        <h2>Accounts</h2>
        <ul>
          <li><Link to="/netflix">Netflix</Link></li>
          <li><Link to="/zillow-group">Zillow Group</Link></li>
          <li><Link to="/yahoo">Yahoo</Link></li>
          <li><Link to="/modus-create">Modus Create</Link></li>
        </ul>
        <Route path="/:id" component={Child}/>
        <Route path="/order/:direction(asc|desc)" component={ComponentWidthRegex}/>
      </div>
    </Router>
  )
}

function Child({match}) {
  return (
    <div>
      <h3>Id: {match.params.id}</h3>
    </div>
  )
}

function ComponentWidthRegex({match}) {
  return (
    <div>
      <h3>Only asc/desc are allowed  {match.parasms.direction}</h3>
    </div>
  )
}